<!-- status-icon -->

<template>
  <div>
    <div class="login-bg">
      <div class="title-container">物流管理系统</div>
      <div class="login-container">
        <el-form
          ref="loginForm"
          :model="loginForm"
          status-icon
          :rules="loginRules"
          class="login-form"
        >
          <h2>管理员登录</h2>
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              autocomplete="off"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="loginForm.password"
              autocomplete="off"
              placeholder="密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="captcha">
            <el-input
              v-model="loginForm.captcha"
              autocomplete="off"
              class="captcha-input1"
              placeholder="验证码"
            ></el-input>
            <div class="captcha" @click="captcha"></div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login" class="login-btn"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="upload">
      <input class="file-input" type="file" @change="handleFileUpload" />
      <button @click="submitFile">上传文件</button>
    </div>
  </div>
</template>

<script>
//import axios from 'axios';
import { reactive } from "vue";
import { getSvg, postLogs, postFile} from "../api/request";
//import axios from "axios";

export default {
  name: "LoginForm",
  data() {
    const loginForm = reactive({
      username: "",
      password: "",
      captcha: "",
    });

    const trails = "default";

    const loginRules = {
      username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
    };
    return {
      loginForm,
      loginRules,
      trails,
    };
  },
  mounted() {
    this.captcha();
  },
  methods: {
    async captcha() {
      getSvg()
        .then((res) => {
          const captcha = res.data;
          this.trails = res.trails;
          document.getElementsByClassName(
            "captcha"
          )[0].innerHTML = `${captcha}`;
        })
        .catch((error) => {
          console.error(error);
        });


    },
    handleFileUpload(event) {

      this.selectedFile = event.target.files[0];
    },

    submitFile() {
      if (localStorage.getItem("token")) {

        const formData = new FormData();

        formData.append("file", this.selectedFile, this.selectedFile.name);
        postFile(formData, {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          })
          .then((response) => {
            console.log("上传成功！", response);
          })
          .catch((error) => {
            console.error("上传失败！", error);
          });
      }else{
        alert('请登录！！！')
      }
    },

    login() {
      let username = this.loginForm.username;
      let password = this.loginForm.password;
      let cap = this.loginForm.captcha;
      if (cap.toLowerCase() !== this.trails) {
        this.loginForm.captcha = "";
        this.captcha();
        alert("登录失败，验证码错误！！");
      } else {
        postLogs({ username, password })
          .then((res) => {
            if (res.code === 299) {
              alert("亲爱的用户！登录成功！");
              localStorage.setItem("token", res.token);
              this.$router.push('/about')
              document.querySelector(".login-bg").style.display = "none";
              document.querySelector(".upload").style.display = "block";
            } else {
              alert("登录失败，用户或密码错误！");
              this.loginForm.username = "";
              this.loginForm.password = "";
              this.loginForm.captcha = "";
              this.captcha();
            }
          })
          .catch((error) => {
            console.error(error);
          });

      }
    },
  },
};
</script>

<style scoped>
body {
  margin: 0px;
  padding: 0px;
}
.login-bg {
  margin: 0px;
  padding: 0px;
  width: 95%;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.title-container {
  margin: 0px;
  padding-left: 10%;
  background-image: url("../assets/bg.jpg");
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  line-height: 60vh;
  font-size: 30px;
  font-weight: 400;
  text-align: left;
  color: white;
}

.admin-login-title {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  margin-left: 5%;
}

.login-container {
  font-size: 20px;
  width: 30%;
  margin-right: 2%;
  margin-left: 2%;
}

.admin-login-text {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}

.login-form {
  width: 100%;
}

.captcha-input1 {
  width: 40%;
}

.text {
  width: 100%;
  margin: 10%;
}

.captcha {
  width: 25%;
  margin-left: 5%;
  cursor: pointer;
}

.login-btn {
  width: 100%;
}

.captcha-img {
  cursor: pointer;
  margin-left: 10px;
  vertical-align: middle;
}

.upload {
  display: none;
  width: 600px;
  height: 600px;
  border-style: dashed;
  border-width: 5px;
  border-color: aqua;
  border-radius: 10%;
  line-height:600px;
  margin:0 auto;

}

</style>
